<template>
  <div class="orderxq">
    <el-tabs v-model="activeTab" type="card" style="width: 85%;border: none">
      <div style="">
        <h3 style="height: 50px;border-color:black;display: inline-block">自取订单状态：{{ stepStatus }}</h3>
        <!-- 订单状态步骤 -->
        <el-steps :active="activeStep" finish-status="success" style="width: 45%;display:inline-block;float: right;">
          <el-step style="width: 140px;" title="顾客下单"></el-step>
          <el-step style="width: 140px;" title="顾客付款"></el-step>
          <el-step style="width: 140px;" title="商家接单"></el-step>
          <el-step style="width: 140px;" title="顾客取货"></el-step>
          <el-step style="width: 140px;" title="评价"></el-step>
        </el-steps>
      </div>
      <!-- 订单信息 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <div style="display: flex;margin-top: 10px;width: 100%;">
          <div style="width: 20%;background-color: #FAFAFA;padding-top: 20px;margin-right:10px;padding-left: 20px">
            <p style="font-weight: bold;margin-bottom: 30px">商品描述</p>
            <p style="margin-bottom: 30px">订单编号：{{ orderForm.transactionId }}</p>
            <p style="margin-bottom: 30px">交易编号：{{ orderForm.transactionId }}</p>
            <p style="margin-bottom: 30px">订单类型：{{ orderForm.orderType }}</p>
            <p style="margin-bottom: 30px">创建时间：{{ orderForm.creationTime }}</p>
            <p style="margin-bottom: 30px">付款时间：{{ orderForm.paymentTime }}</p>
          </div>
          <div style="width: 20%;background-color: #FAFAFA;padding-top: 20px;margin-right:10px;padding-left: 20px">
            <p style="font-weight: bold;margin-bottom: 30px">买家信息</p>
            <p style="margin-bottom: 30px">买家昵称：{{ orderForm.customerNickname }}</p>
            <p style="margin-bottom: 30px">手机号码：{{ orderForm.buyerPhone }}</p>
            <p style="margin-bottom: 30px">使用设备：{{ orderForm.deviceUsed }}</p>
          </div>
          <div style="width: 20%;background-color: #FAFAFA;padding-top: 20px;margin-right:10px;padding-left: 20px">
            <p style="font-weight: bold;margin-bottom: 30px">商家信息</p>
            <p style="margin-bottom: 30px">店铺名称：{{ orderForm.shopname }}</p>
            <p style="margin-bottom: 30px">联系手机：{{ orderForm.shoptel }}</p>
            <p style="margin-bottom: 30px">所在地区：{{ orderForm.shopregion }}</p>
            <p style="margin-bottom: 30px">详细地址：{{ orderForm.shopaddress }}</p>
            <p style="margin-bottom: 30px">取餐号码：{{ orderForm.pickupNumber }}</p>
          </div>
          <div style="width: 20%;background-color: #FAFAFA;padding-top: 20px;margin-right:10px;padding-left: 20px">
            <p style="font-weight: bold;margin-bottom: 30px">配送信息</p>
            <p  v-if="orderForm.deliveryMethod=='平台专送'" style="margin-bottom: 30px;">收货地址：{{ orderForm.receivingAddress }}</p>
            <p style="margin-bottom: 30px">配送方式：{{ orderForm.deliveryMethod }}</p>
            <p  v-if="orderForm.deliveryMethod=='到店自取'" style="margin-bottom: 30px">预计自取：{{ orderForm.expectedDeliveryTime }}</p>
            <p  v-if="orderForm.deliveryMethod=='平台专送'" style="margin-bottom: 30px">预计送达：{{ orderForm.expectedDeliveryTime }}</p>
            <p style="margin-bottom: 30px">餐具数量：{{ orderForm.quantity }}份</p>
            <p style="margin-bottom: 30px">订单备注：{{ orderForm.orderNote }}</p>
          </div>
          <div style="width: 20%;background-color: #FAFAFA;padding-top: 20px;margin-right:10px;padding-left: 20px">
            <p style="font-weight: bold;margin-bottom: 30px">发票信息</p>
            <p style="margin-bottom: 30px">开具发票：{{ orderForm.invoiceIssuance }}</p>
            <p v-if="orderForm.deliveryMethod=='平台专送'" style="margin-bottom: 30px">发票类型：{{ orderForm.invoiceType }}</p>
            <p v-if="orderForm.deliveryMethod=='平台专送'" style="margin-bottom: 30px">发票内容：{{ orderForm.invoiceContent }}</p>
            <p v-if="orderForm.deliveryMethod=='平台专送'" style="margin-bottom: 30px">发票抬头：{{ orderForm.invoiceCompany }}</p>
            <p v-if="orderForm.deliveryMethod=='平台专送'" style="margin-bottom: 30px">企业税号：{{ orderForm.taxId }}</p>
          </div>
        </div>
      </el-card>
      <!-- 商品信息 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商品信息</span>
        </div>
        <el-table :data="orderForm.goods" style="width: 100%">
          <!--          <el-table-column prop="id" label="ID"></el-table-column>-->
          <el-table-column label="商品" width="240px">
            <template slot-scope="scope">
              <!--              <div style="width: 80px;"><img :src="scope.row.gimage" alt="" style="width: 50px;height: 50px;"> </div>-->
              <!--              <div style="width: 100px;"></div>-->
              <div style="display: flex">
                <div style="margin-right: 20px;margin-top: 10px; ">
                  <img :src="scope.row.gimage" width="50px" height="50px">
                </div>
                <div>
                  <div>{{ scope.row.gname }}</div>
                  <div>ID:{{ scope.row.gid }}</div>
                  <div>
                    <el-button type="text" style="font-size: 12px;color: black" @click="good(scope.row)">交易快照
                    </el-button>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="picked" label="规格"></el-table-column>
          <el-table-column prop="status" label="属性"></el-table-column>
          <el-table-column label="单价">
            <template slot-scope="scope">
              ￥{{ scope.row.price }}.00
            </template>
          </el-table-column>
          <el-table-column prop="numed" label="数量"></el-table-column>
          <el-table-column label="打包费">
            <template slot-scope="scope">
              ￥{{ scope.row.numed*2 }}.00
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 资金信息 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>资金信息</span>
        </div>
        <!--        <el-form :model="fundForm" label-width="120px">-->
        <!--          <el-form-item label="应付金额">-->
        <!--            <span>{{ fundForm.amountDue }}</span>-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="实付金额">-->
        <!--            <span>{{ fundForm.amountPaid }}</span>-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="商家承担运费">-->
        <!--            <span>{{ fundForm.merchantShippingFee }}</span>-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="技术服务费">-->
        <!--            <span>{{ fundForm.technicalServiceFee }}</span>-->
        <!--          </el-form-item>-->
        <!--          <el-form-item label="平台补贴">-->
        <!--            <span>{{ fundForm.platformSubsidy }}</span>-->
        <!--          </el-form-item>-->
        <!--        </el-form>-->
        <el-row>
          <el-col :span="6"><span>应付款：</span><span>￥{{ this.jg.zj }}</span></el-col>
          <el-col :span="6"><span>打包费：</span><span>￥{{this.jg.dbf}}</span></el-col>
<!--          <el-col :span="6"><span>商家承担配送费：</span><span>￥4.00</span></el-col>-->
<!--          <el-col :span="6"><span>技术服务费：</span><span>￥19.35</span>-->
<!--            <el-tooltip effect="dark" content="折扣：10.00%" placement="top"><i class="el-icon-question"></i>-->
<!--            </el-tooltip>-->
<!--          </el-col>-->
<!--          <el-col :span="6"><span>技术服务费优惠：</span><span>+￥0.5元/单</span></el-col>-->
<!--          <el-col :span="6"><span>平台补贴：</span><span>满减活动：+￥2.00</span></el-col>-->
          <el-col :span="6" align="right"><span>本单商家预计收入：</span><span>￥{{this.jg.zj+this.jg.dbf}}</span></el-col>
        </el-row>
      </el-card>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: null,
      // 订单状态步骤的当前活动步骤（假设顾客取货中，对应索引为3）
      activeStep: null,
      // 订单信息
      orderForm: {},
      // 资金信息
      fundForm: {
        amountDue: 135.00,
        amountPaid: 133.00,
        merchantShippingFee: 0,
        technicalServiceFee: 3.99,
        platformSubsidy: 0
      },
      jg:{
        zj: 0,
        dbf: 0,
      },
    };
  },
  methods: {
    first() {
      this.orderForm = JSON.parse(localStorage.getItem("order"))
      console.log(this.orderForm)
      this.activeStep = this.orderForm.orderStatus+1
      this.orderForm.goods.forEach(item => {
        this.jg.zj = item.price * item.numed + this.jg.zj
        this.jg.dbf = 2*item.numed+this.jg.dbf
      })
    },
  },
  created() {
    this.first();
  },
  computed: {
    stepStatus() {
      const statuses = ["顾客下单", "顾客付款", "商家接单", "顾客取货", "评价"];
      if (this.activeStep != 5) {
        return statuses[this.activeStep];
      } else {
        return "订单已完成";
      }
    },
  }
};
</script>

<style scoped>
.box-card {
  margin-top: 15px;
}
</style>
